"use client";

import { BoardCard } from "./board-card";
import { EmptyBoard } from "./empty/empty-board";
import { EmptyFavorites } from "./empty/empty-favorites";
import { EmptySearch } from "./empty/empty-search";
import { api } from "@/convex/_generated/api";
// 查询数据
import { useQuery } from "convex/react";
import { NewBoardButton } from "./new-board-button";

interface BoardListProps {
  orgId: string;
  query: {
    search?: string;
    favorites?: string;
  };
}

/**
 * @components 主程序界面会员列表组件
 */

export const BoardList = ({ orgId, query }: BoardListProps) => {
  const data = useQuery(api.boards.get, { orgId, ...query });

  if (data === undefined) {
    return (
      <div>
        <h2 className="text-2xl">
          {query.favorites ? "Favorite boards" : "Team boards"}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-8 pb-10">
          <NewBoardButton orgId={orgId} disbaled />
          <BoardCard.Skeleton />
          <BoardCard.Skeleton />
          <BoardCard.Skeleton />
          <BoardCard.Skeleton />
        </div>
      </div>
    );
  }

  if (!data?.length && query.search) {
    return <EmptySearch />;
  }

  if (!data?.length && query.favorites) {
    return <EmptyFavorites />;
  }

  if (!data?.length) {
    return <EmptyBoard />;
  }

  return (
    <div>
      <h2 className="text-2xl">
        {query.favorites ? "Favorite boards" : "Team boards"}
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-8 pb-10">
        <NewBoardButton orgId={orgId} />
        {data.length &&
          data?.map((board) => {
            return (
              <BoardCard
                key={board._id!}
                id={board._id!}
                title={board.title!}
                imageUrl={board.imageUrl!}
                authorId={board.authorId!}
                authorName={board.authorName!}
                createdAt={board._creationTime!}
                orgId={board.orgId!}
                isFavorites={board.isFavorite}
              />
            );
          })}
      </div>
    </div>
  );
};
